<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>联想式输入框</title>
    <link rel="stylesheet" href="../css/reset.css">
</head>

<body>
    <div>
        <h1>描述</h1>
        <p>通过检测用户的输入，根据当前输入的数据，从数据库或者网路中获取匹配的相似的数据，在下方的列表框中展示</p>
    </div>
    <div id="app">
        <w-think-input :data-source="data" @input="getData()" :my-style="style"></w-think-input>
    </div>
</body>

</html>
<script src="../js/vue.min.js"></script>
<script>
    Vue.component("w-think-input", {
        data: function() {
            return {
                currentItem:"",
                baseStyle: {
                    boxSizing: "border-box",
                    "-webkit-box-sizing": "border-box",
                    boxSizing:"content",
                    paddingLeft: "10px"
                }
            }
        },
        props: ["data-source", "my-style"],
        template: `
        <div>
            <input type="text" name="abc" @input="$emit('input')" v-model="currentItem" :style="[baseStyle, myStyle]"/>
            <div v-for="(item,index) in dataSource" :key="index" @click="click(index)" :style="[baseStyle, myStyle]">{{item}}</div>
        </div>
        `,
        methods: {
            click: function(index) {
                console.log(index)
                this.currentItem = this.dataSource[index]
            }
        }
    })
 
    var app = new Vue({
        el:"#app",
        data: {
            data: [],
            style: {
                width: "100%",
                height: "50px",
                lineHeight:"50px",
                border: "1px solid #e1e1e1",
            }
        },
        methods: {
            getData: function() {
                this.data =  ["a", "abc", "a dog", "an apple"]
            }
        }
    }) 
</script>